<div class="flex-r hp100 set-template-html" v-loading="loading">
  <div class="con con-left bg-white">
    <draggable v-model="componentsList" @end="onDragEnd1" @start="onDragStart1" draggable=".components-item" :sort="false"
      :group="{ name: 'componentsGroup', pull: 'clone', put: false }">
      <el-tag v-model="componentsList" size="middle" class="mr10 mb10 text-c pointer components-item move"
        style="width: 100px;" v-for="item in componentsList" :key="item.type" effect="plain"
        @click.stop="addItem(item)">
        {{ item.label }}
      </el-tag>
    </draggable>
   
  </div>
  <div class="con flex1 con-middile bg-white mr10 ml10  template_box relative">
    <div style="position: absolute;right: 10px;top:10px;">

      <div class="mb10">
        <el-button type="primary" @click="preview">预览属性</el-button>
      </div>
      <div>
        <el-button @click="saveTemplate" type="success">保存模板</el-button>
      </div>
    </div>
    <div style="position: absolute;left: 10px;top:10px;">
      <div class="mb10">
        <el-button type="danger" @click="clearTemplate">清空模板</el-button>
     
      </div>
    </div>
    <el-scrollbar class="scrollbar-wrapper"
      style="height: 100%;width: 620px;margin:0 auto;font-size: 14px;line-height:24px;padding-bottom: 60px;box-sizing: border-box;box-shadow: 0px 0px 5px #ccc;"
      :horizontal="false">
      <div class="p10">
        <draggable v-model="consentList" @end="onDragEnd2" :group="{ name: 'componentsGroup', put: true}" style="min-height: 300px;position: relative;">
          <draggableItem class="move" @click.native="selectItem(item,index)"
            @contextmenu.prevent.right.native="showMenu($event,item,index)" v-for="(item,index) in consentList"
            :key="item.field_name" :currentItem="item" :class="{'active':activeItem.field_name==item.field_name}">

          </draggableItem>
        </draggable>
      </div>

      <div v-show="isMenuVisible" class="context-menu" :style="{ top: `${menuTop}px`, left: `${menuLeft}px` }">
        <div @click="menuItemClicked('1')" class="color-primary">复制</div>
        <div @click="menuItemClicked('2')" class="color-danger">删除</div>
        <div @click="menuItemClicked('3')">关闭</div>

      </div>

    </el-scrollbar>
  </div>
  <div class="con con-right bg-white">
    <el-scrollbar class="scrollbar-wrapper" style="height: 100%;">


      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="bold color-primary">同意书属性</span>
          </div>
          <el-form :model="templateInfo" label-position="right" label-width="90px">
            <el-form-item label="同意书ID" prop="TID">
              <el-input type="text" v-model.trim="templateInfo.TID" placeholder="请输入" readonly>
              </el-input>
            </el-form-item>
            <el-form-item label="同意书名称" prop="TEMPLATE_MC">
              <el-input type="text" v-model.trim="templateInfo.TEMPLATE_MC" placeholder="请输入" clearable>
              </el-input>
            </el-form-item>
            
            <el-form-item label="所属科室" prop="ZKID">
              <el-select v-model="templateInfo.ZKID" filterable placeholder="请选择" class="wp100">
                <el-option :label="item.ZKMC" :value="item.ZKID" v-for="item in ZK_LIST" :key="item.ZKID">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="PX">
              <el-input type="text" v-model.trim="templateInfo.PX" placeholder="请输入数字" clearable>
              </el-input>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card class="box-card mt10">
          <div slot="header" class="clearfix">
            <span class="bold color-primary">组件属性</span>
          </div>

          <el-form :model="activeItem" ref="formInline" label-position="right" label-width="80px">
            <el-form-item label="字段名" prop="field_name" v-if="activeItem.field_name!=undefined">
              <el-input type="text" v-model.trim="activeItem.field_name" placeholder="请输入" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="标签名称" prop="label">
              <el-input type="text" v-model="activeItem.label" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="是否必填" prop="field_value_required" v-if="activeItem.field_value_required!=undefined">
              <el-select v-model="activeItem.field_value_required" placeholder="请选择" class="wp100">
                <el-option label="是" :value="true">
                </el-option>
                <el-option label="否" :value="false">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="动态内容" prop="field_value_save" v-if="activeItem.field_value_save!=undefined">
              <el-select v-model="activeItem.field_value_save" placeholder="请选择" class="wp100">
                <el-option label="是" :value="true">
                </el-option>
                <el-option label="否" :value="false">
                </el-option>
              </el-select>
            </el-form-item>

            <template v-if="activeItem.type=='checkbox'">
              <el-form-item label="字段选项" v-if="activeItem.field_options!=undefined" prop="field_options">
                <el-checkbox-group v-model="activeItem.field_value">
                  <el-checkbox v-for="(info,info_index) in activeItem.field_options" :label="info.dm" :key="info.dm">
                    <el-input v-model="info.dm" style="width: 100px;" placeholder="请输入dm"></el-input>
                    <el-input v-model="info.mc" style="width: 140px;" placeholder="请输入mc"></el-input>
                    <el-link type="danger" @click.stop="deleteOption(info_index)"><i class="el-icon-delete"></i>
                    </el-link>
                  </el-checkbox>
                </el-checkbox-group>
                <el-link type="primary" @click="addOption()"><i class="el-icon-plus"></i>
                </el-link>
              </el-form-item>
            </template>

            <template v-else-if="activeItem.type=='radio'">
              <el-form-item label="字段选项" v-if="activeItem.field_options!=undefined" prop="field_options">
                <el-radio-group v-model="activeItem.field_value">
                  <el-radio class="mb5" v-for="(info,info_index)  in activeItem.field_options" :label="info.dm"
                    :key="info.dm">
                    <el-input v-model="info.dm" style="width: 100px;" placeholder="请输入dm"></el-input>
                    <el-input v-model="info.mc" style="width: 140px;" placeholder="请输入mc"></el-input>
                    <el-link type="danger" @click.stop="deleteOption(info_index)"><i class="el-icon-delete"></i>
                    </el-link>
                  </el-radio>

                </el-radio-group>
                <el-link type="primary" @click="addOption()"><i class="el-icon-plus"></i>
                </el-link>
              </el-form-item>
            </template>

            <template v-else-if="activeItem.type=='select'">
              <el-form-item label="字段内容">
                <el-input type="input" v-model="activeItem.field_value" placeholder="" clearable
                   ></el-input>
              </el-form-item>

              <el-form-item label="字段选项" v-if="activeItem.field_options!=undefined" prop="field_options">
                <div v-for="(info,info_index)  in activeItem.field_options">
                  <el-input v-model="info.dm" style="width: 100px;" placeholder="请输入dm"></el-input>
                  <el-input v-model="info.mc" style="width: 140px;" placeholder="请输入mc"></el-input>
                  <el-link type="danger" @click.stop="deleteOption(info_index)"><i class="el-icon-delete"></i>
                  </el-link>
                </div>
                <el-link type="primary" @click="addOption()"><i class="el-icon-plus"></i>
                </el-link>
              </el-form-item>
            </template>

            <template v-else-if="activeItem.type=='sign'">
              <el-form-item label="字段内容">
                <el-input type="textarea" v-model="activeItem.field_value.sign_img" placeholder="只读" clearable
                  :autosize="{ minRows: 3, maxRows: 10}" readonly></el-input>
              </el-form-item>

              <el-form-item label="签名身份">
                <el-select v-model="activeItem.field_value.sign_identity" placeholder="请选择" class="wp100"
                  @change="changeSignIdentity">
                  <el-option label="本人" value="1">
                  </el-option>
                  <el-option label="亲属" value="2">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>

            <template v-else-if="activeItem.type=='sign2'">
              <el-form-item label="字段内容">

                <el-input type="textarea" v-model="activeItem.field_value" placeholder="只读" clearable
                  :autosize="{ minRows: 3, maxRows: 10}" readonly></el-input>
              </el-form-item>
              <el-form-item label="签名页码">

                <el-input type="input" v-model="activeItem.sign_page" placeholder="请输入数字" clearable
                  ></el-input>
              </el-form-item>
              <el-form-item label="开始坐标X">
                <el-input type="input" v-model="activeItem.sign_x" placeholder="请输入数字" clearable
                  ></el-input>
              </el-form-item>
              <el-form-item label="开始坐标Y">
                <el-input type="input" v-model="activeItem.sign_y" placeholder="请输入数字" clearable
                  ></el-input>
              </el-form-item>
              <el-form-item label="签名类型">
                <el-input type="input" v-model="activeItem.sign_type" placeholder="" clearable
                  ></el-input>
                  <div class="color-warn fs12">1:手写签名;2:指纹;3:手写加指纹</div>

              </el-form-item>
            </template>

            <!-- <template v-else-if="activeItem.type=='sign3'">
              <el-form-item label="签名值">
                <el-input type="input" v-model="activeItem.field_value.sign_img" clearable
                  ></el-input>
              </el-form-item>
              <el-form-item label="时间值">
                <el-input type="input" v-model="activeItem.field_value.sign_time" clearable
                 ></el-input>
              </el-form-item>
            </template> -->


            <template v-else>
              <el-form-item label="字段内容" v-if="activeItem.field_value!=undefined" prop="field_value">
                <el-input type="textarea" v-model="activeItem.field_value" placeholder="请输入" clearable
                  :autosize="{ minRows: 3, maxRows: 10}"></el-input>
              </el-form-item>
            </template>


            <el-form-item label="元素类别" v-if="activeItem.field_display!=undefined" prop="field_display">
              <el-select v-model="activeItem.field_display" placeholder="请选择" class="wp100">
                <el-option label="块元素" value="block">
                </el-option>
                <el-option label="行内块元素" value="inline-block">
                </el-option>
                <el-option label="行内元素" value="inline">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="宽度" v-if="activeItem.field_width!=undefined" prop="field_width">
              <el-input type="text" v-model.trim="activeItem.field_width" placeholder="请带上单位" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="高度" v-if="activeItem.field_height!=undefined" prop="field_height">
              <el-input type="text" v-model.trim="activeItem.field_height" placeholder="请带上单位" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="字体位置" v-if="activeItem.field_text_align!=undefined" prop="field_text_align">
              <el-select v-model="activeItem.field_text_align" placeholder="请选择" class="wp100">
                <el-option label="居左" value="left">
                </el-option>
                <el-option label="居中" value="center">
                </el-option>
                <el-option label="居右" value="right">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体大小" v-if="activeItem.field_font_size!=undefined" prop="field_font_size">
              <el-input type="text" v-model.trim="activeItem.field_font_size" placeholder="请带上单位" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="首行缩进" v-if="activeItem.field_text_indent!=undefined" prop="field_text_indent">
              <el-input type="text" v-model.trim="activeItem.field_text_indent" placeholder="请带上单位" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="字体加粗" v-if="activeItem.field_font_weight!=undefined" prop="field_font_weight">
              <el-select v-model="activeItem.field_font_weight" placeholder="请选择" class="wp100">
                <el-option label="是" value="bold">
                </el-option>
                <el-option label="否" value="normal">
                </el-option>
              </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="顶距" v-if="activeItem.field_top!=undefined" prop="field_top">
              <el-input type="text" v-model="activeItem.field_top" placeholder="请带上单位" clearable>
              </el-input>
              <div class="color-warn fs12">如：10px （即为前端的top:10px）</div>
            </el-form-item>
            <el-form-item label="左距" v-if="activeItem.field_left!=undefined" prop="field_left">
              <el-input type="text" v-model="activeItem.field_left" placeholder="请带上单位" clearable>
              </el-input>
              <div class="color-warn fs12">如：10px （即为前端的left:10px）</div>
            </el-form-item>

            <el-form-item label="zIndex" v-if="activeItem.field_index!=undefined" prop="field_index">
              <el-input type="text" v-model="activeItem.field_index" placeholder="-1" clearable>
              </el-input>
              <div class="color-warn fs12">如：-1 （即为前端的z-index:-1）</div>
            </el-form-item>

            <el-form-item label="距离" v-if="activeItem.field_margin!=undefined" prop="field_margin">
              <el-input type="text" v-model="activeItem.field_margin" placeholder="请带上单位" clearable>
              </el-input>
              <div class="color-warn fs12">如：10px（即为前端的margin:10px） </div>
            </el-form-item>

            <el-form-item label="字体颜色" v-if="activeItem.field_color!=undefined" prop="field_color">
              <el-input type="text" v-model.trim="activeItem.field_color" placeholder="#000" clearable>
              </el-input>
              <div class="color-warn fs12">如：#000 </div>
            </el-form-item>
            <el-form-item label="关联数据" v-if="activeItem.field_related!=undefined" prop="field_related">
              <el-input type="text" v-model.trim="activeItem.field_related" placeholder="" clearable>
              </el-input>
              <div class="color-warn fs12">备注：填写需要带出的日期的字段名 </div>
            </el-form-item>


            <el-form-item label="逻辑关联" v-if="activeItem.field_relate_names!=undefined" prop="field_relate_names">
              <el-input type="text" v-model.trim="activeItem.field_relate_names" placeholder="" clearable>
              </el-input>
              <div class="color-warn fs12">备注：多个字段名，请用英文逗号隔开 </div>
            </el-form-item>

            <el-form-item label="逻辑关联计算公式" v-if="activeItem.field_relate_formula!=undefined" prop="field_relate_formula">
              <el-select v-model="activeItem.field_relate_formula" placeholder="请选择" class="wp100">
                <el-option label="BMI" value="BMI">
                </el-option>
              </el-select>
            </el-form-item>
            


            <el-form-item label="行数" v-if="activeItem.field_rows!=undefined" prop="field_rows">
              <el-input type="text" v-model.trim="activeItem.field_rows" placeholder="数字" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="列数" v-if="activeItem.field_cols!=undefined" prop="field_cols">
              <el-input type="text" v-model.trim="activeItem.field_cols" placeholder="数字" clearable>
              </el-input>
            </el-form-item>

            <el-form-item label="背景颜色" v-if="activeItem.field_background!=undefined" prop="field_background">
              <el-input type="text" v-model.trim="activeItem.field_background" placeholder="颜色" clearable>
              </el-input>
            </el-form-item>

         
          </el-form>
        </el-card>
      </div>
    </el-scrollbar>

  </div>
  <el-dialog title="预览同意书属性" :visible.sync="visible" :close-on-click-modal="false" width="80%" top="10px">
    <div>

      <div>
        <pre class="pre-attr">{{consentString}}</pre>
      </div>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible  = false">关闭</el-button>
    </div>
  </el-dialog>
</div>